import {UnitShopType} from "../../../script/frame/dataSource/DataModel";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import PageContent, {PageContentType} from "../component/PageContent";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {UnitShopInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {TextAlign} from "../../../script/frame/apiModel/adapter/adapterInterface/model1/IFrameAdapter";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {ColorStr, ItemShopInfo} from "../../../script/type/Type";
import TimerUtil from "../../../script/frame/TimerUtil";
import {publicGui} from "../../interface/PublicGui";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";

interface IProp {
    pageContentType: PageContentType;
    getItemsFun: (player: PlayerModel) => { items: ItemShopInfo[], sellUnitId: string, buyUnitId: string }
}
interface IState {
    itemShopInfos: ItemShopInfo[];
    infoVisible: boolean,
    sellUnitId: string,
    buyUnitId: string,
    title: string,
    subTitle: string,
    des: string,
    x: number,
    y: number,
}


export default class UnitShopBar extends UnitShopInterface<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            itemShopInfos: [],
            visible: true,
            infoVisible: false,
            sellUnitId: '',
            buyUnitId: '',
            title: "",
            subTitle: '',
            des: '',
            x: 0,
            y: 0,
        }
    }

    render = () => {
        let shopItemMaps: SelectItemMap[] = Configer.getUIConfig(UIConfigKey.shopItemMaps);
        const disableBlp = Configer.getResource(ResourceKey.disableBlp);
        const iconSize = { h: 0.048, w: 0.034 }
        const onePageNum = 12;

        const lvH = 0.0166;
        const lvW = 0.01875;


        const allItems: ItemShopInfo[] = [];
        // const itemShopInfo = this.state.itemShopInfos[0];
        for (let i = 0; i < 12; i++) {
            const itemShopInfo = this.state.itemShopInfos[i];
            if (itemShopInfo) {
                allItems.push(itemShopInfo)
            } else {
                allItems.push({ id: '', cl: 0, type: UnitShopType.normal, num: 0 })
            }
        }
        const backPos = { x: 0.715, y: 0.495 };

        // const margin = { t: 0.001, l: 0.014 };

        const margin = { t: 0.02, l: 0.014 };

        return <PageContent type={this.props.pageContentType}   key={GuiKeys.pageContentUnitShop}  pos={backPos} hidden={!this.state.visible} selectItemMap={shopItemMaps} onePageNum={onePageNum} elementsFun={
            (selectKey: number) => {
                return allItems.map(
                    (itemShopInfo, index, array) => {
                        const type = itemShopInfo?.type;
                        if (type === selectKey && itemShopInfo && itemShopInfo.id?.length > 0) {
                            let icon = 'xx';
                            let title = '';
                            let subTitle = '';
                            let des = '';

                            let num = itemShopInfo.num;

                            const itemId = itemShopInfo.id;
                            const itemData = DataRouter.getItemDataByItemId(itemId);
                            const maskSize = { h: iconSize.h, w: iconSize.w }

                            if (itemData) {
                                icon = DataRouterUtil.getIconUrlByIconData(itemData);

                                if (itemData.Name) {
                                    title = itemData.Name;
                                }

                                if (itemData.Ubertip) {
                                    des = itemData.Ubertip;
                                }

                                let disable = false;
                                let cl = 0;
                                let maxValue = 0;

                                if (!CodeUtil.isNullOrZero(this.state.buyUnitId)) {
                                    if (num && num > 0) {
                                        maskSize.h = 0.0001;
                                    } else {
                                        if (itemData.stockStart && TimerUtil.getGameTime() > itemData.stockStart) {
                                            maxValue = itemData.stockRegen;
                                        } else {
                                            maxValue = itemData.stockStart;
                                        }
                                        if (!CodeUtil.isNullOrZero(itemShopInfo.cl)) {
                                            cl = itemShopInfo.cl;
                                        }

                                        if (cl > 0 && maxValue > 0) {
                                            maskSize.h = (maskSize.h * cl) / maxValue;
                                            disable = true;
                                        } else {
                                            maskSize.h = 0.0001;
                                        }
                                    }
                                    if (disable) {
                                        subTitle = CodeUtil.getColorStr(ColorStr.red, '该物品还在冷却')
                                    } else {
                                        let str = '';
                                        if (!CodeUtil.isNullOrZero(itemData.goldcost)) {
                                            str = str + `金币:${itemData.goldcost} `
                                        }
                                        if (!CodeUtil.isNullOrZero(itemData.lumbercost)) {
                                            if (!CodeUtil.isNullOrZero(str)) {
                                                str = str + ` `
                                            }
                                            str = str + `木材:${itemData.lumbercost}`
                                        }
                                        if (!CodeUtil.isNullOrZero(str) && !CodeUtil.isNullOrZero(maxValue)) {
                                            str = `冷却:${maxValue}`
                                        }
                                        subTitle = CodeUtil.getColorStr(ColorStr.yellow, str)
                                    }
                                } else {
                                    subTitle = CodeUtil.getColorStr(ColorStr.red, '单位距离商店过远!')
                                }


                                return <View   key = {`${GuiKeys.itemShopBarItem}|${index}`} style={{ backgroundImage: icon, width: iconSize.w, height: iconSize.h, marginT: margin.t, marginL: margin.l }}>
                                    <View   key={`${GuiKeys.itemShopBarItemMask}|${index}`} style={{ backgroundImage: disableBlp, width: maskSize.w, height: maskSize.h, float: true }}></View>
                                    <View   key={`${GuiKeys.itemShopBarItemNum}|${index}`}  style={{ hidden: (num === 0) , fontAlign: TextAlign.center, backgroundImage: disableBlp ,fontSize: lvH, width: lvW, height: lvH, float: true, marginT: iconSize.h - lvH - 0.001, marginL:  iconSize.w - lvW }}>{num}</View>
                                    <View   key={`${GuiKeys.itemShopBarItemModel}|${index}`} onMouseEnter={(event) => { this.showInfoPage(title, subTitle, des, event.x, event.y) }} onMouseLeave={() => {this.closeInfoPage()}} onMouseDown={()=> { return this.sellItem(itemId) }} style={{ width: iconSize.w, height: iconSize.h, float: true }}></View>
                                </View>
                            }
                        }
                        return <View   key = {`${GuiKeys.itemShopBarItem}|${index}`} style={{ hidden: true }}>
                            <View   key={`${GuiKeys.itemShopBarItemMask}|${index}`} style={{ hidden: true }}></View>
                            <View   key={`${GuiKeys.itemShopBarItemNum}|${index}`} style={{ hidden: true }}></View>
                            <View   key={`${GuiKeys.itemShopBarItemModel}|${index}`} style={{ hidden: true }}></View>
                        </View>
                    }
                )
            }
        }>
        </PageContent>
    }

    sellItem = (itemId: string) => {
        const data: UISyncData = { id: SyncId.buyItem, param: { itemId, sellUnitId: this.state.sellUnitId, buyUnitId: this.state.buyUnitId } };
        return data
    }


    showInfoPage = (title: string, subTitle: string, des: string, x: number, y: number) => {
        if (!CodeUtil.isNullOrZero(title)) {
            publicGui.showInfoPage(x, y, title, subTitle, des);
        }
    }

    closeInfoPage = () => {
        publicGui.closeInfoPage();
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }

    openBar = () => {
        let visible = false;
        const ret =  this.props.getItemsFun(PlayerFactory.getInstance().getLocalPlayer());
        const itemShopInfos = ret.items;
        const buyUnitId = ret.buyUnitId;
        const sellUnitId = ret.sellUnitId;
        if (itemShopInfos && itemShopInfos.length > 0) {
            visible = true
        }
        this.setState({
            ...this.state,
            visible: visible,
            buyUnitId,
            sellUnitId,
            itemShopInfos,
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}